<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>管理员信息</span>
            </div>
        </template>
        <!-- 详情部分 -->
        <div slot="container">
          <div>
            管理员ID: <span>{{ info_store.id }}</span>
          </div>
          <el-divider></el-divider>
          <div>
            账号: <span>{{ info_store.account }}</span>
          </div>
          <el-divider></el-divider>
          <div>
            用户组: <span>{{ info_store.userGroup }}</span>
          </div>
          <el-divider></el-divider>
          <div>创建时间: <span>{{info_store.ctime}}</span></div>
          <el-divider></el-divider>
    
          <div>
            管理员头像:
            <!-- <el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar> -->
            <el-upload
              class="avatar-uploader"
              action="http://sell.h5.itsource.cn:8087/users/avatar_upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="info_store.imgUrl" :src="info_store.imgUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
    </el-card>
  </template>
  
 <script lang="ts" setup>
  import { computed } from "vue";
  // 引入仓库中的个人信息数据和调用函数
  import { useUser } from "@/store/useUser.ts";
  // 实例化 取出仓库中的数据
  let {$getInfo_store} = useUser();
  let info_store = computed(()=>useUser().$info);
//   引入API
 import {reqUploadAvatar_api} from'@/api/apis.ts'
//  引入UI
  import { ElMessage } from "element-plus";

//   上传成功
  let handleAvatarSuccess = async (file:any)=>{
        console.log(file)
        //判定 上传成功后，调用修改头像的方法
        if(file.code==0){
            // 调用修改头像的接口
            let res = await reqUploadAvatar_api({
                imgUrl: file.imgUrl
            });
            let {code} = res.data;
            if(code === 0){
                // 成功 调用仓库中的函数，让它重绘视图。
                $getInfo_store();
            }
        }
  }
  // 上传之前的函数--主要用于限制上传文件的格式和大小
    let beforeAvatarUpload = (file:any)=>{
        const isJPG = file.type === "image/jpeg";
        const isPNG = file.type === "image/png";
        const isLt2M = file.size / 1024 / 1024 < 2;
  
        if (!isJPG && !isPNG) {
            ElMessage.error("上传头像图片只能是 JPG,PNG格式!");
        }
        if (!isLt2M) {
            ElMessage.error("上传头像图片大小不能超过 2MB!");
        }
        return (isJPG || isPNG) && isLt2M;
    }
  </script>
  
  <style lang="scss" scoped>
  
    ::v-deep .avatar-uploader .el-upload {
      border: 1px dashed #ccc;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
    .avatar {
      width: 100px;
      height: 100px;
      display: block;
    }
  </style>